<template>
    <BasicModal
      v-bind="$attrs"
      ref="modal"
      @register="registerModal"
      show-footer
      :can-fullscreen="false"
      width="80%"
    >
      <template #footer>
        <a-button @click="closeModal">关闭</a-button>
      </template>
      <div ref="chartRef" :style="{ height: '300px', width: '100%' }"></div>
    </BasicModal>
  </template>
  <script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref, Ref } from 'vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { useECharts } from '@/hooks/web/useECharts';
  import { defHttp } from '@/utils/http/axios';
  const modal = ref<any>();
  const [registerModal, { closeModal, changeLoading }] =
  useModalInner(async (data) => {
    setTimeout(() => {
        getData()
    }, 1000);
  });
  
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  const getData = async () => {
    getInstance()?.showLoading();
    let res = [];
    try {
        res = await defHttp.get({
            url: '/statistic/orderStatistic',
        })
    } finally {
        getInstance()?.hideLoading();
    }
    setOptions(
        {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
          },
          tooltip: {
            trigger: 'axis'
          },
        yAxis: {
            type: 'value',
            name: '个数（个）'
        },
        series: [
            {
              data: res,
              name: '订单统计',
              type: 'line',
              areaStyle: {}
            }
        ]
    })
  };
  const handleSubmit = async () => {
    getData()
  }
  
  
  </script>
  